import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, List, Avatar, Tag, InputNumber } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Paragraph } = Typography;
const { TextArea } = Input;
const { Option } = Select;

/**
 * 读者评论功能
 * 模拟生成各类读者对文章或产品的评论
 */
const ReaderCommentsPage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [generatedComments, setGeneratedComments] = useState<Array<{ username: string; avatar: string; content: string; sentiment: string; time: string }>>([]);
  const [commentCount, setCommentCount] = useState<number>(5);
  const [inputRef, setInputRef] = useState<InputRef | null>(null);
  const [tourVisible, setTourVisible] = useState<boolean>(false);

  // 创建ref引用
  const contentTopicRef = useRef<HTMLDivElement>(null);
  const sentimentTypeRef = useRef<HTMLDivElement>(null);
  const commentCountRef = useRef<HTMLDivElement>(null);
  const extraRequirementsRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const commentsResultRef = useRef<HTMLDivElement>(null);

  // 组织ref引用
  const tourRefs = {
    contentTopic: contentTopicRef,
    sentimentType: sentimentTypeRef,
    commentCount: commentCountRef,
    extraRequirements: extraRequirementsRef,
    generateButton: generateButtonRef,
    commentsResult: commentsResultRef
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'contentTopic',
      title: '输入内容主题',
      description: '请输入文章或产品的主题名称',
    },
    {
      key: 'sentimentType',
      title: '选择情感倾向',
      description: '选择生成评论的情感类型，可以是混合、正面、负面或中性',
    },
    {
      key: 'commentCount',
      title: '设置评论数量',
      description: '调整需要生成的评论数量，范围在1-50之间',
    },
    {
      key: 'extraRequirements',
      title: '添加额外要求',
      description: '可以添加对评论内容的特殊要求，如关注重点、评论风格等',
    },
    {
      key: 'generateButton',
      title: '生成评论',
      description: '点击此按钮开始AI评论生成过程',
    },
    {
      key: 'commentsResult',
      title: '查看评论结果',
      description: '生成完成后，您可以在此处查看、复制单条评论或所有评论',
    },
  ];

  // 显示引导
  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 预设的用户名和头像
  const userProfiles = [
    { username: '科技爱好者', avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=user1' },
    { username: '文学评论家', avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=user2' },
    { username: '热心读者', avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=user3' },
    { username: '行业专家', avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=user4' },
    { username: '普通用户', avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=user5' },
    { username: '学习者', avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=user6' },
    { username: '思考者', avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=user7' },
    { username: '观察者', avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=user8' },
  ];

  // 生成评论时间
  const generateCommentTime = () => {
    const now = new Date();
    const daysAgo = Math.floor(Math.random() * 7); // 0-6天前
    const hours = Math.floor(Math.random() * 24);
    const minutes = Math.floor(Math.random() * 60);

    if (daysAgo === 0) {
      return `${hours}小时${minutes}分钟前`;
    } else if (daysAgo === 1) {
      return `1天前`;
    } else {
      return `${daysAgo}天前`;
    }
  };

  // 处理表单提交，生成评论
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
      setGeneratedComments([]);

      // 模拟API调用延迟
      setTimeout(() => {
        const contentTopic = values.contentTopic || '某文章';
        const sentimentType = values.sentimentType || 'mixed';

        // 根据内容主题和情感类型生成评论
        const comments: Array<{ username: string; avatar: string; content: string; sentiment: string; time: string }> = [];

        // 生成不同情感倾向的评论模板
        const commentTemplates = {
          positive: [
            `这篇${contentTopic}写得非常好，观点清晰，论证充分。特别是关于...的部分，让我受益匪浅。期待看到更多类似的内容！`,
            `读完${contentTopic}，我深受启发。作者对...的分析非常到位，给了我很多新的思考方向。感谢分享这么优质的内容！`,
            `${contentTopic}真是干货满满！里面的...建议非常实用，我已经开始尝试了。希望作者能继续更新，我会一直关注的。`,
            `非常喜欢这篇${contentTopic}，语言通俗易懂，内容丰富详实。作者的专业水平和写作能力都令人钦佩。`,
            `${contentTopic}解答了我长期以来的疑惑，特别是关于...的部分，分析得非常透彻。强烈推荐给有同样疑问的朋友！`,
          ],
          negative: [
            `我对这篇${contentTopic}有些不同看法。作者在...方面的观点似乎有些片面，缺乏足够的证据支持。`,
            `读完${contentTopic}，我觉得内容有些空洞，缺乏深度。希望作者在未来的作品中能够提供更多具体的案例和数据。`,
            `这篇${contentTopic}的逻辑性有待加强，部分观点之间的衔接不够自然。另外，关于...的论述也不够深入。`,
            `${contentTopic}中存在一些事实性错误，希望作者在发表前能够仔细核查。作为读者，我希望看到更加严谨的内容。`,
            `我认为这篇${contentTopic}的实用性不强，里面的建议缺乏可操作性。希望作者能够结合实际情况提供更具体的指导。`,
          ],
          neutral: [
            `这篇${contentTopic}提供了一些有价值的信息，但总体来说中规中矩。作者对...的分析有一定道理，但也可以从其他角度进行探讨。`,
            `读完${contentTopic}，我觉得作者的观点有一定的参考价值，但还需要更多的实践检验。期待看到更多相关的研究和讨论。`,
            `${contentTopic}介绍了一些基本概念和观点，对于初学者来说有一定的帮助。但对于有一定基础的读者来说，内容可能略显浅显。`,
            `这篇${contentTopic}的结构清晰，语言流畅，但缺乏一些独特的见解。希望作者能够在未来的作品中展现更多的创新思维。`,
            `${contentTopic}提供了一个新的视角来看待...问题，但其中的一些观点还需要进一步的验证和完善。`,
          ],
          mixed: [
            `这篇${contentTopic}有很多亮点，特别是关于...的部分非常精彩。但在...方面的论述我认为还可以更加深入一些。`,
            `总体来说，${contentTopic}是一篇不错的文章，提供了很多有价值的信息。不过，我对其中...的观点持保留态度。`,
            `作者在${contentTopic}中的一些分析非常到位，但也存在一些值得商榷的地方。希望能够看到更多关于这方面的讨论。`,
            `${contentTopic}的前半部分内容非常精彩，给了我很多启发。但后半部分的论述略显仓促，有些观点没有充分展开。`,
            `我认为这篇${contentTopic}在...方面做得很好，但在...方面还有改进的空间。期待作者未来的作品能够更加完善。`,
          ],
        };

        // 根据选择的情感类型生成评论
        let templates: string[] = [];

        if (sentimentType === 'mixed') {
          // 混合情感类型，随机选择不同类型的评论
          const allTemplates = [
            ...commentTemplates.positive,
            ...commentTemplates.negative,
            ...commentTemplates.neutral,
            ...commentTemplates.mixed
          ];

          // 打乱数组
          for (let i = allTemplates.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [allTemplates[i], allTemplates[j]] = [allTemplates[j], allTemplates[i]];
          }

          templates = allTemplates.slice(0, commentCount);
        } else {
          // 单一情感类型
          templates = commentTemplates[sentimentType as keyof typeof commentTemplates].slice(0, commentCount);
        }

        // 生成评论数据
        for (let i = 0; i < templates.length; i++) {
          const user = userProfiles[i % userProfiles.length];
          const sentiment = sentimentType === 'mixed'
            ? ['positive', 'negative', 'neutral', 'mixed'][Math.floor(Math.random() * 4)]
            : sentimentType;

          comments.push({
            username: user.username,
            avatar: user.avatar,
            content: templates[i],
            sentiment: sentiment,
            time: generateCommentTime(),
          });
        }

        setGeneratedComments(comments);
        setLoading(false);
        message.success('评论生成成功！');
      }, 1500);
    } catch (error) {
      setLoading(false);
      message.error('生成失败，请重试');
    }
  };

  // 获取情感标签的颜色
  const getSentimentColor = (sentiment: string) => {
    const colorMap: { [key: string]: string } = {
      positive: 'green',
      negative: 'red',
      neutral: 'blue',
      mixed: 'purple',
    };
    return colorMap[sentiment] || 'default';
  };

  // 获取情感标签的文本
  const getSentimentText = (sentiment: string) => {
    const textMap: { [key: string]: string } = {
      positive: '正面',
      negative: '负面',
      neutral: '中性',
      mixed: '混合',
    };
    return textMap[sentiment] || '未知';
  };

  // 复制所有评论
  const handleCopyAllComments = () => {
    if (!generatedComments.length) {
      message.warning('没有可复制的评论');
      return;
    }

    const commentsText = generatedComments.map(comment => {
      return `${comment.username} (${getSentimentText(comment.sentiment)}): ${comment.content}`;
    }).join('\n\n');

    navigator.clipboard.writeText(commentsText).then(() => {
      message.success('所有评论已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败，请手动复制');
    });
  };

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Typography>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Title level={1}>读者评论<TourGuideButton onClick={showTour} /></Title>
          </div>
          <Paragraph>
            输入文章主题或产品信息，AI将模拟生成各类读者评论。
          </Paragraph>
        </Typography>

        <Row gutter={[16, 16]}>
          <Col xs={24} md={8}>
            <Card title="评论设置" size="small">
              <Form
                form={form}
                layout="vertical"
              >
                <Form.Item
                  label="内容主题"
                  name="contentTopic"
                  rules={[{ required: true, message: '请输入内容主题' }]}
                >
                  <div ref={contentTopicRef}>
                    <Input placeholder="请输入文章或产品的主题名称" />
                  </div>
                </Form.Item>

                <Form.Item
                  label="情感倾向"
                  name="sentimentType"
                  initialValue="mixed"
                >
                  <div ref={sentimentTypeRef}>
                    <Select style={{ width: '100%' }}>
                      <Option value="mixed">混合情感</Option>
                      <Option value="positive">正面评论</Option>
                      <Option value="negative">负面评论</Option>
                      <Option value="neutral">中性评论</Option>
                    </Select>
                  </div>
                </Form.Item>

                <Form.Item
                  label="评论数量"
                  name="commentCount"
                  rules={[{ required: true, message: '请输入评论数量' }]}
                >
                  <div ref={commentCountRef}>
                    <InputNumber
                      min={1}
                      max={50}
                      defaultValue={3}
                      onChange={(value?: any) => setCommentCount(value || 0)}
                      style={{ width: '100%' }}
                    />
                  </div>
                </Form.Item>

                <Form.Item label="额外要求（可选）">
                  <div ref={extraRequirementsRef}>
                    <TextArea
                      rows={3}
                      placeholder="请输入对评论内容的特殊要求，如关注重点、评论风格等"
                      maxLength={200}
                      showCount
                    />
                  </div>
                </Form.Item>

                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button
                      type="primary"
                      onClick={handleSubmit}
                      loading={loading}
                      block
                    >
                      {loading ? '生成中...' : '生成评论'}
                    </Button>
                  </div>
                </Form.Item>
              </Form>
            </Card>
          </Col>

          <Col xs={24} md={16}>
            <Card
              title="生成的读者评论"
              size="small"
              ref={commentsResultRef}
              extra={
                generatedComments.length > 0 ? (
                  <Button
                    type="primary"
                    icon={<CopyOutlined />}
                    onClick={handleCopyAllComments}
                  >
                    复制所有评论
                  </Button>
                ) : null
              }
            >
              {loading ? (
                <div style={{ textAlign: 'center', padding: '40px 0' }}>
                  <Spin size="large" />
                  <p style={{ marginTop: '16px' }}>正在生成评论，请稍候...</p>
                </div>
              ) : generatedComments.length > 0 ? (
                <List
                  dataSource={generatedComments}
                  renderItem={(comment) => (
                    <List.Item
                      actions={[
                        <Button
                          key="copy"
                          type="text"
                          icon={<CopyOutlined />}
                          onClick={() => {
                            navigator.clipboard.writeText(comment.content).then(() => {
                              message.success('评论已复制到剪贴板');
                            });
                          }}
                        >
                          复制
                        </Button>
                      ]}
                    >
                      <List.Item.Meta
                        avatar={<Avatar src={comment.avatar} alt={comment.username} />}
                        title={
                          <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span style={{ marginRight: '8px' }}>{comment.username}</span>
                            <Tag color={getSentimentColor(comment.sentiment)}>
                              {getSentimentText(comment.sentiment)}
                            </Tag>
                            <span style={{ marginLeft: 'auto', color: '#999', fontSize: '12px' }}>
                              {comment.time}
                            </span>
                          </div>
                        }
                        description={comment.content}
                      />
                    </List.Item>
                  )}
                />
              ) : (
                <div style={{ textAlign: 'center', padding: '40px 0', color: '#999' }}>
                  请输入内容主题，点击生成评论按钮
                </div>
              )}
            </Card>
          </Col>
        </Row>
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
};

export default ReaderCommentsPage;